<template>
  <div class="app">
  <div class="AlertType">
    <div class="demo-date-picker">
        <!-- 发布通知按钮 -->
    <div class="leave">
        <!-- <el-button type="primary" @click="router.push('/index/family-schoolInteraction/StudentLeaveList')">请假</el-button> -->
        <el-button text @click="dialogFormVisible" :icon="Edit" color="#626aef" >新增</el-button>
    </div>
    </div>

    <el-table :data="$store.alertlist" border stripe tooltip-effect="dark" style="width: 100%" row-key>
      <el-table-column  prop="id" label="序号" width="100"  />
        <el-table-column prop="alerttype" label="通知类型" width="180" />
        <el-table-column prop="property" label="属性" />
        <el-table-column prop="statu" label="状态" />
        <el-table-column prop="name" label="操作" >
            <template #default="scope">
                <el-button link type="primary" size="small"  @click.prevent="editRow(scope.row)">停用/启动</el-button>
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
            </template>
        </el-table-column>
  </el-table>
</div>
  </div>
</template>

<script setup>
import {Edit} from '@element-plus/icons-vue'
import {alertliststore} from '../../../stores/counterzsq'
import { onMounted, ref ,reactive} from 'vue'
import { useRouter } from 'vue-router'

// 拿到pinia中的公共数据
var $store = alertliststore();
console.log( "公用的数据",$store.alertlist);

// 点击发布通知按钮就会跳转至编辑类型见界面
var router = useRouter()
var dialogFormVisible = ()=>{
  router.push('/editalerttype');
}

// 点击删除时删除本行数据
//定义函数
var deleteRow = (row)=>{
  console.log(row);
  $store.alertdelete(row);
}

var statu = ref('停用')

var editRow = (row)=>{
  $store.alertedit(row)
}


</script>

<style>
.app{
  background-color: #f7f7f7;
  padding: 25px 15px;
}

.AlertType{
  background-color: white;
  padding: 20px 20px ;
}

.demo-date-picker {
  display: flex;
  justify-content: end;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.demo-date-picker .block {
  /* padding: 30px 0; */
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  flex: 1;
  width: 0;
  height: 30px;
  line-height: 30px;
}

</style>